<template>
    <div>
        <JsForm ref="refForm" :FormParams="formParams" :Rule="formRules" :PropsConfig="formProps" />
        <div class="button-row">
            <el-button type="primary" @click="handleSubmitForm">提 交</el-button>
            <el-button @click="handleCancel">取 消</el-button>
        </div>
    </div>
</template>

<script setup>
import JsForm from '@/components/Form/index.tsx'
import { formRules } from './config'
import { updateUserProfile } from '@/api/system/user'
import { reactive, toRefs } from 'vue'

console.log(formRules.value, 'formRules')

const props = defineProps({
    user: {
        type: Object,
    },
})

const { proxy } = getCurrentInstance()

const refForm = ref()

const data = reactive({
    formParams: {
        oldPassword: null,
        password: null,
        confirmPassword,
    },
    formProps: {
        'label-width': '110px',
    },
})

const { formParams, formProps } = toRefs(data)

/** 提交按钮 */
function submit() {
    proxy.$refs.userRef.validate((valid) => {
        if (valid) {
            updateUserProfile(form.value).then((response) => {
                proxy.$modal.msgSuccess('修改成功')
                props.user.phonenumber = form.value.phonenumber
                props.user.email = form.value.email
            })
        }
    })
}

/** 关闭按钮 */
function close() {
    proxy.$tab.closePage()
}

// 回显当前登录用户信息
watch(
    () => props.user,
    (user) => {
        if (user) {
            form.value = { nickName: user.nickName, phonenumber: user.phonenumber, email: user.email, sex: user.sex }
        }
    },
    { immediate: true },
)
</script>

<style lang="scss" scoped>
.button-row {
    text-align: right;
    margin-top: 26px;
}
</style>
